import { Component, PropsWithChildren } from 'react'
import { View, Text, Button, Input, Checkbox, Image } from '@tarojs/components'
import { AtIcon, AtNoticebar, AtList, AtListItem, AtTag } from 'taro-ui'
import Img from '../../picture/upload.png'
import './index.scss'
import Taro from '@tarojs/taro'

export default class Index extends Component<PropsWithChildren> {
  state: any
  constructor(props) {
    super(props)
    this.state = {
      tagList: [{ title: '新上房源' }, { title: '小户型' }, { title: '有电梯' }, { title: '优质教育' }],
      tagsList: [{ title: '低总价' }, { title: '满五年' }, { title: '随时看房' }, { title: '满五唯一' },
      { title: '低首付' }, { title: '两室朝阳' }, { title: '精装' }, { title: '南北通透' }, { title: '品质小区' }]
    }
  }
  componentWillMount() { }

  componentDidMount() { }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }
  onClick() {
    Taro.navigateBack()
  }
  render() {
    return (
      <View className='index'>
        <View className='nav-bar-box'>
          <View className='status-bar'></View>
          <View className='title-bar'>
            <AtIcon onClick={this.onClick.bind(this)} className='icon' value='chevron-left' size='24' color='#fff'></AtIcon>
            <Text className='tit'>新房出售</Text>
          </View>
        </View>
        <AtNoticebar className='noctice' icon='alert-circle'>
          发布本条信息将收费10.00元
        </AtNoticebar>
        <View className='message'>
          <View className='upload'>
          <Image className='avatar' src={this.state.ImgUrl}  />
            {/* <AtAvatar className='avatar' size={'large'} image={this.state.ImgUrl} onClick={} ></AtAvatar> */}
            <input type="file" style={{ display: 'none' }}  />
            <View>
              <View className='title'>上传照片</View>
              <View className='desc'>只能上传房屋图片,不能含有文字、数字、网址、名片、水印等,所有类别图片总计20张</View>
            </View>
            <AtIcon className='icon' value='chevron-right' size='22' color='#ccc'></AtIcon>
          </View>
          <View className='address'>
            <AtList>
              <AtListItem
                title='小区'
                note='请选择小区'
                arrow='right'
              />
              <AtListItem
                title='房产类型'
                note='请选择'
                arrow='right'
              />
              <AtListItem
                title='区域'
                note='请选择'
                arrow='right'
              />
            </AtList>
          </View>
          <View className='address'>
            <AtList>
              <AtListItem
                title='户型|朝向|装修'
                note='请选择'
                arrow='right'
              />
              <AtListItem
                title='所在楼层 请填写 层  共  请填写  层'
              />
            </AtList>
          </View>
          <View className='mian'>
            <AtList>
              <AtListItem
                title='面积'
                note='请输入'
                extraText='m²'
              />
              <AtListItem
                title='售价'
                note='请输入'
                extraText='万元'
              />
            </AtList>
          </View>
          <View className='tags'>
            <View className='tit'>标签</View>
            {
              this.state.tagList?.map((item: any, index: number) => {
                return <AtTag key={index} className='tag' type='primary'>{item.title}</AtTag>
              })
            }
            <View className="tagss">
              {
                this.state.tagsList?.map((item: any, index1: number) => {
                  return <AtTag key={index1} className='tag1' type='primary'>{item.title}</AtTag>
                })
              }
            </View>
          </View>
          <View className='des'>
            <AtList>
              <AtListItem
                title='标题'
                note='请输入'
                arrow='right'
              />
              <AtListItem
                title='描述'
                note='请输入'
                arrow='right'
              />
            </AtList>
          </View>
          <View className='lian'>
            <AtList>
              <AtListItem
                title='联系人'
                note='梦想^_^'
                arrow='right'
              />
            </AtList>
          </View>
          <View className='phone'>
            <View>联系电话</View>
            <View>
              <Input type='text' placeholder='请请输入'></Input>
            </View>
          </View>
          <View className='time'>
            <View className='has'>有效时间</View>
            <View className='day'>30天</View>
          </View>
          <View className='Pay'>
            <View className='read'>
              <Checkbox value='选中' checked></Checkbox>
              <View className='title'>已阅读并接受
                <Text>《宏烨找房网房源信息发布规则》</Text>
              </View>
            </View>
            <Button className='btn' type='primary'>发布并支付</Button>
          </View>
        </View>
      </View >
    )
  }
}
